<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kaoshi</title>
    <style>

        ul {
            list-style: none;

        }
        ul > li{
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            margin: 2px;
            background: yellowgreen;

        }

        ul>li:hover{
            background: green;
        }

        ul>li{
            position: relative;
        }

        ul>li>ul{
            position: absolute;
            left: -40px;
            display: none;
            background: yellow;
        }

        /*ul>li>ul>li{*/
            /*position: absolute;*/
            /*left: -40px;*/
            /*display: none;*/
            /*background: yellow;*/
        /*}*/

        ul>li:hover >ul{
            display: block;
        }

        ul>li>ul>li:hover{
            background: red;
        }


    </style>
</head>
<body>
    <ul>
        <li>章节
            <ul>
                <li>
                    python
                    <ul>
                        <li>for循环</li>
                    </ul>
                </li>
                <li>
                    go
                </li>
            </ul>
        </li>
        <li>问答</li>
        <li>笔记</li>
        <li>提问</li>
    </ul>
</body>
</html>